
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>后台管理</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body,
        html {
            background-color: rgb(61, 74, 82);
        }

        .header h2,
        .footer h3 {
            width: 100%;
            height: 70px;
            color: white;
            text-align: center;
            line-height: 70px;
        }

        .main {
            background-color: lightgrey;
            height: 100%;
        }

        .main .main-left {
            width: 30%;
            float: left;
        }

        .main .main-left a {
            text-decoration: none;
            color: white;
        }

        .main .main-right {
            width: 70%;
            height: 800px;
            float: left;
            background-color: white;
            text-align: center;
        }

        .main .main-right button {
            width: 100px;
            height: 50px;
        }

        .main .main-right h3 {
            width: 100%;
            height: 100px;
            line-height: 100px;
            font-size: 24px;
        }

        .main-right table,
        th,
        tr,
        td {
            border: 1px solid lightgray;
        }

        .main .main-right table {
            width: 100%;
            border-collapse: collapse;
        }

        .main .main-right table th {
            background-color: lightgray;
        }

        .main .main-right table tr {
            height: 50px;
        }

        .main .main-left ul {
            background-color: gray;
        }

        .main .main-left ul li {
            opacity: .5;
            list-style: none;
            text-align: center;
            margin: 0;
            padding: 0;
            height: 50px;
            line-height: 50px;
            cursor: pointer;
            font-size: 20px;
        }

        .main .main-left ul li:hover {
            opacity: 1;
            transition: .3s;
            background-color: rgb(100, 125, 141);
        }

        .footer {
            position: relative;
        }

        .footer h3 {
            position: fixed;
            bottom: 0;
            background-color: gray;
        }
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue-router@3.4.8/dist/vue-router.min.js"></script>
</head>

<body>
    <!-- 被vue实例所控制的路由 -->
    <div id="app">
        <!-- 路由占位符 -->
        <router-view></router-view>
    </div>


    <script>
        // 定义App根组件
        const App = {
            template: `
            <div>
                <div class="header">
                    <h2>后台管理系统</h2>
                </div>
                <div class="main">
                    <div class="main-left">
                        <ul>
                            <li><router-link to="/users">用户管理</router-link></li>
                            <li><router-link to="/rights">权限管理</router-link></li>
                            <li><router-link to="/goods">商品管理</router-link></li>
                            <li><router-link to="/orders">订单管理</router-link></li>
                            <li><router-link to="/settings">系统设置</router-link></li>
                        </ul>
                    </div>
                    <div class="main-right">
                        <router-view></router-view>
                    </div>
                </div>
                <div class="footer">
                    <h3>版权信息</h3>
                </div>
            </div>
            `,

        }

        // 创建路由组件
        const Users = {
            data() {
                return {
                    // 私有数组处保存用户数据
                    userList: [
                        { id: 1, name: '张三', age: 10 },
                        { id: 2, name: '李四', age: 20 },
                        { id: 3, name: '王五', age: 30 },
                        { id: 4, name: '赵柳', age: 40 },
                    ]
                }
            },
            methods: {
                goDetail(id) {
                    console.log(id);
                    this.$router.push("/userinfo/" + id)

                }
            },
            template: `<div>
            <h3>用户管理组件</h3>

            <table>
                <thead>
                    <tr>
                        <th>编号</th>
                        <th>姓名</th>
                        <th>年龄</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for='item in userList' :key='item.id'>
                        <td>{{item.id}}</td>
                        <td>{{item.name}}</td>
                        <td>{{item.age}}</td>
                        <td>
                            <a href="JavaScript:;" @click='goDetail(item.id)'>详情</a>
                        </td>
                    </tr>
                </tbody>
            </table>
            </div>
            `
        }

        // 创建用户详情页组件
        const UserInfo = {
            props: ['id'],
            template: `<div>
            <h1>用户详情页 用户ID：{{id}}</h1>
            <button @click="goback()">后退</button>
            </div>
            `,
            methods: {
                goback() {
                    this.$router.go(-1)
                }
            }
        }

        const Rights = {
            template: `
            <h3>权限管理组件</h3>
            `
        }
        const Goods = {
            template: `
            <h3>商品管理组件</h3>
            `
        }
        const Orders = {
            template: `
            <h3>订单管理组件</h3>
            `
        }
        const Settings = {
            template: `
            <h3>系统管理组件</h3>
            `
        }
        // 实例化路由对象
        const router = new VueRouter({
            // 定义路由规则
            routes: [
                {
                    path: '/',
                    component: App,
                    // 重定向：
                    redirect: '/users',
                    // 子组件
                    children: [
                        { path: '/users', component: Users },
                        { path: '/userinfo/:id', component: UserInfo, props: true },
                        { path: '/rights', component: Rights },
                        { path: '/goods', component: Goods },
                        { path: '/orders', component: Orders },
                        { path: '/settings', component: Settings }
                    ]
                },

            ]
        })
        
        var vm = new Vue({
            el: '#app',
            router//挂载
        })
    </script>
</body>

</html>